<template>
  <div class="Learning-mixBlendMode">
    <h3>设置子元素 <code>mix-blend-mode</code> 属性查看效果</h3>
    <codeContainer :options="options">
      <template #default="{active}">
        <div class="mixBlendMode-container example-1">
          <div class="light"></div>
          <div class="dark"></div>
          <p :style="stringToObject(active)">LEARNING</p>
        </div>
      </template>
      <template #code>
            <pre data-type="css">
              {{ codeFragment["mixBlendModel-1"] }}
            </pre>
      </template>
    </codeContainer>
    <h3>设置为 <code>difference</code> 实现白底黑字 黑底白字功能</h3>
    <codeContainer>
      <template #default="{active}">
        <div class="mixBlendMode-container example-2">
          <div class="light"></div>
          <div class="dark"></div>
          <p :style="stringToObject(active)">LEARNING</p>
        </div>
      </template>
      <template #code>
            <pre data-type="css">
              {{ codeFragment["mixBlendModel-3"] }}
            </pre>
      </template>
    </codeContainer>
    <h3>设置为 <code>screen</code> 实现文字镂空效果</h3>
    <codeContainer>
      <template #default="{active}">
        <div class="mixBlendMode-container example-3">
          <p :style="stringToObject(active)">LEARNING</p>
        </div>
      </template>
      <template #code>
            <pre data-type="css">
              {{ codeFragment["mixBlendModel-2"] }}
            </pre>
      </template>
    </codeContainer>
  </div>
</template>

<script setup>
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import { ref } from 'vue';
import { stringToObject } from '@/assets/js/utils';
import codeFragment from '../../assets/js/codeFragment';

const options = ref([
  { name: 'mix-blend-mode: normal;' },
  { name: 'mix-blend-mode: multiply;' },
  { name: 'mix-blend-mode: screen;' },
  { name: 'mix-blend-mode: difference;' }
]);
</script>

<style scoped lang="scss">
.Learning-mixBlendMode {
  .mixBlendMode-container {
    //background-image: linear-gradient(90deg,#fff,#000);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 600;
    position: relative;
    border: 1px solid var(--learning-border-color);

    .light {
      background-color: rgba(255, 255, 255, 0.6);
      position: absolute;
      left: 0;
      width: 50%;
      height: 100%;
    }

    .dark {
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      right: 0;
      width: 50%;
      height: 100%;
    }

    p {
      position: relative;
      z-index: 2;
      letter-spacing: .5em;
      transition: transform .8s;
      color: red;
      font-size: 4rem;
    }

    &.example-1 {
      .light {
        background-color: rgba(72, 140, 78, 0.6);
      }

      p {
        //background-color: pink;
        padding: 10px 20px;
        letter-spacing: unset;
      }

      &:hover p {
        transform: translateX(-100px);
      }
    }

    &.example-2 {
      .light {
        background-color: #fff;
      }

      .dark {
        background-color: #000;
      }

      p {
        letter-spacing: unset;
        font-weight: 900;
        color: #fff;
        mix-blend-mode: difference;
      }

      &:hover p {
        transform: translateX(100px);
      }

    }

    &.example-3 {
      background: url("@/assets/image/21092Q11G9-1-1200.jpg") no-repeat;
      background-position: 100% 50%;

      p {
        width: 100%;
        text-align: center;
        font-size: 6rem;
        background-color: #fff;
        color: #000;
        font-weight: 900;
        transition: letter-spacing .8s;
        padding: 5px 0;
        line-height: 1.2;
        mix-blend-mode: screen;
      }

      &:hover p {
        letter-spacing: unset;
      }
    }
  }
}
</style>
